@charset "utf-8";
/* 所有移动端的屏幕分辨率都是按照320-640来计算的，也就是说它最小也就320，最大也就640，但是实际的分辨率都会放大1倍，2倍，甚至三倍 ,这里我们不会考虑IPAD*/
/*width=device-width 首先，先设置这一句话，这句话的意思是页面的宽度等于设备的宽度，设备有多宽，页面就有多宽.如果某个布局的width是100%的话，那么它会占满整个屏幕，如果你默认不设置的话*/
/*它同样也会根据默认的宽度来占满整个屏幕，所以，对于，需要占满整个屏幕的布局，我们不需要考虑它的宽度设置，但如果PC上来看的话，那么它也会同样占满整个屏幕，但如果我们的手机网站需要在PC端也能正常显示的话*/
/*最好的结果是设置所有的大的布局的最大宽度是640，max-width:6.4rem ,这样，它在PC端也就显示640PX了 */
/*initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0 这几句话就是为了让它禁止缩放，永远是1:1的比例，为了防止屏幕翻转啊，用户双击放大这种情况的发生，同样，它也会自动缩放，这里，我们禁止了 */
/*也就是有多大就显示多大，因为其实我们知道屏幕的范围是在320-640之间的，所以，我们要考虑这个像素范围内的布局就可以了*/


/*这里，你先搞清楚一个问题，如果是纯移动端的，不考虑PC端的，那么你只需要做320-640像素之间的处理就可以了，因为几乎所有的手机都是在这个分辨率范围内的*/
/*但是，这里，如果你需要这个网站在PC端，在手机端，都能完美展示的话，你必须使用媒体查询来做，PC端怎么显示，移动端又怎么显示，这些肯定都要分开来处理的，bootstrap这里就实现了所有的设备之间的兼容*/
/*但，不是所有的网站都适合bootstrap这种的，虽然它是移动端优先的设计理念，但是设计师完全不可能按照1170这样的设计页面的大小来给你，也可能给你个960像素的，那么你就必须要修改来满足自己的需求 */
/*后边的兼容响应式的布局会让我们实现一个PC和手机端完美集合的例子 */



html {
    /*我们的根大小就是100px,以后的所有大小都是根据它来进行计算的*/
	font-size: 625%;
}
body,h1,h2,h3,h4,p,ul,ol,form,fieldset,figure {
	margin: 0;
	padding: 0;
}
body {
	background-color: #fff;
	font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei UI", "Microsoft YaHei", SimHei, "\5B8B\4F53", simsun, sans-serif;
    /*所有的字体大小都要根据html中设置的大小来进行设置，rem的标准是100px,最终得到的像素是x100的结果*/
	font-size: .16rem;
}
ul,ol {
	list-style: outside none none;
}
a {
	text-decoration: none;
}
/*图片就这么简单的实现了自适应，跟bootstrap中的实现原理是一样的，思路我感觉，设置了图片最大也不能超过屏幕的大小而已，只是设置了它不会存在溢出的情况*/
/*当整个屏幕放大的时候，图片也不会超出屏幕的大小，并且随着屏幕的放大而变大，当整个屏幕缩小的时候，图片为了不溢出，就只能缩小了。哈哈，终于明白了*/
img {
	display: block;
	max-width: 100%;
}
div,figure,figcaption {
	box-sizing: border-box;
}
.none {
	display: none;
}
/*清理浮动*/
.clearfix:after {
	content: '.';
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
/*因为header是全屏类的，所以，它的宽度就是100% ,这里，所有的大小都被REM所替代了，方便管理,改一个地方，所有的地方都会随之改变的 */
/*PC端的话，设置width:100%,要设置下它的最小宽度min-width:1263px ,这是因为PC端的布局都是有固定大小的，大于这个宽度的，我们居中设置，小于这个宽度的，我们要保证我们的内容能呈现出来 */
#header {
	width: 100%;
	height: .45rem;
	background-color: #333;
	font-size: 0.16rem;
	position: fixed;
	top: 0;
	z-index: 9999;
}
#header .link {
	height: .45rem;
	line-height: .45rem;
	color: #eee;
}
/*我们都已经知道了，外部的布局现在都是 max-width:640像素，那么如果这个布局里头还有布局，怎么办呢？它也要占一定的宽度，那么如何设置它的宽度呢？*/
/*单个布局要设置宽度，一定得用百分比了,类似于bootstrap里头的12栅格，每个小布局都是按照目前大布局中的百分比来分配的，大布局会随时根据屏幕进行改变，所以，小的布局也要这么做，设置百分比会很好的解决*/
/**/

#header .link li {
	width: 25%;
	text-align: center;
	float: left;
}
#header .link a {
	color: #eee;
	display: block;
}
#header .link a:hover, 
#header .active a {
	background-color: #000;
}
/*从这里开始，只要是页面当中的整体布局，都会被设置为最大的宽度不超过640，完全是为了兼容移动端的手机页面 */
/*设置了最大的宽度，如果超过这个宽度的话，放大的情况就居中，缩小的情况的话，它的宽度会随着缩小，因为我们并没有设置它的具体宽度 */
#adver {
	max-width: 6.4rem;
	margin: 0 auto;
	padding: .45rem 0 0 0;
}
/*手机端最大640，那么我们就按照640的大小来设计网站，不用考虑放大情况下的处理了，因为它最大就这么大了*/
/*那么，它缩小就是我们唯一考虑的问题，缩小了，页面的布局也不能错位，首先，缩小了，header,footer,这种只设置了最大的宽度，缩小了它们会变小的，这个不用考虑了*/
/*图片的话也无需考虑了，设置了响应式之后，它们也会自适应的，关键是字体，字体目前只是个固定的大小的，还没有响应式的设计，并且字体的换行情况也得考虑下 */
/*延伸一下，bootstap不仅要考虑放大，而且要考虑缩小，所有的东西都要考虑放大后怎么办，是自身放大？还是把下边的内容放在旁边补全空白的地方 ,缩小的话，是自身缩小？还是把旁边的东西挤下去？*/
/*这里，boostrap设置了一个范围，在这个范围内它会让自身得到方法或者缩小，一旦超过了这个范围，那么，它的布局允许你发生变化，补全空白的布局，又或者是将多出来的内容挤下去 */
/*而很多情况下，我们只考虑了自身的放大和缩小问题，不会考虑其他的*/
/*其实，很多PC端的，都只设置了一个相对而言较小的分辨率来进行设计，如果屏幕放大了，margin:0 auto大不了两边的内容留白就OK了。。如果真要考虑缩小的问题，大不了设置下min-width,不低于这个宽度就OK了,反正会出现滚动条以便到这个宽度*/
/*所以，在PC端，在那些设置了width:100%的布局中，一定要给它来个最小宽度，否则当缩放的时候，滚动条拉出来的就是空白了，当然了，你也可以不考虑，因为毕竟是固定布局，很少会考虑到用户会缩放这点 */
#footer {
	max-width: 6.4rem;
	background-color: #222;
	color: #777;
	margin: 0 auto;
	text-align: center;
	padding: .1rem 0;
	font-size: .16rem;
}
#footer .top {
	padding: 0 0 .05rem 0;
}
#search {
	max-width: 6.4rem;
	height: .33rem;
	margin: 0 auto;
	background-color: #ddd;
	padding: .03rem 0 0 0;
	position: relative;
}
#search .search {
	width: 95%;
	height: .27rem;
	border-radius: .04rem;
	border: none;
	outline: none;
	background-color: #fff;
	display: block;
	margin: 0 auto;
	font-size: .14rem;
	padding: 0 .05rem;
}
/*定位的话，也得用百分比的定位 */
#search .button {
	display: block;
	outline: none;
	width: .5rem;
	height: .27rem;
	color: #666;
	border: none;
	background-color: #eee;
	border-top-right-radius: .04rem;
	border-bottom-right-radius: .04rem;
	font-size: .14rem;
	position: absolute;
	top: .03rem;
	right: 1%;
}
#tour {
	max-width: 6.4rem;
	margin: .1rem auto 0 auto;
}
#tour h2 {
	text-align: center;
	color: #666;
	font-size: .26rem;
}
#tour h3 {
	text-align: center;
	color: #666;
	font-weight: normal;
	font-size: .16rem;
	margin: .05rem 0 .1rem 0;
}
/*图片的列表采用浮动的方式来，每一个占用50%的宽度，无论怎么缩放，它都会占用50%的大小，里面的图片和文字都会随着缩小*/
#tour figure {
	width: 50%;
	float: left;
	background-color: #eee;
	font-size: .16rem;
	padding: 0 0 .05rem 0;
}
#tour figure img {
	padding: .02rem;
	border-radius: .04rem;
}
/*下边是图片的文字信息*/
#tour figcaption {
	color: #666;
	font-size: .16rem;
	padding: .02rem .05rem;
}
/*文字因为大小不能变，但是外部的盒子DIV的宽度是自适应的，如果很小的情况下，文字会产生换行，这样，布局就会错乱*/
/*在这里，我们要避免一行的文字产生换行，让它最大也就一行的空间，如果多了就隐藏掉了就OK了*/
/*white-space永远保持一行 ,overflow:hidden,多余的字隐藏 ，text-overflow:ellipsis 多余的字用..来省略 */
/*但是，我们在这里考虑一个问题，如果它要占据一定的高度怎么办？超过这个高度我们会发生隐藏，也就是说文字的DIV是有height:.3rem ,有30px的高度*/
/*white-space这个属性就不能用了，只能给它一个比较合适的高度，然后overflow:hidden,text-overflow:ellipsis 这样，但一般不推荐这么用 */
#tour h4 {
	font-weight: normal;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
#tour p {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/*如果内容比较少的情况下，就不必考虑换行的情况了*/
#tour .info {
	padding: .1rem 0 0 0;
	font-size: .16rem;
}
#tour .price {
	color: #f60;
}
#tour .price strong {
	letter-spacing: .01rem;
}
#tour .sat {
	position: relative;
	float: right;
	right: .05rem;
	font-style: normal;
}
/*资讯开始*/
#headline {
	max-width: 6.4rem;
	margin: 0 auto;
	padding: .45rem 0 0 0;
	position: relative;
}
#headline hgroup {
	position: absolute;
	top: 48%;
	left: 10%;
	color: #eee;
}
#headline h2 {
	font-size: .22rem;
}
#headline h3 {
	font-size: .14rem;
}
.list {
	font-size: .16rem;
	color: #666;
	max-width: 6.4rem;
	margin: .15rem auto;
	padding: 0 .1rem;
}
.list h2 {
	font-size: .2rem;
	border-bottom: .01rem dashed #999;
	padding: 0 0 .15rem 0;
}
.about p {
	line-height: 2;
	margin: .2rem 0;
}
.about address {
	font-style: normal;
	line-height: 1.6;
	margin: .2rem 0;
}
/*内部的所有东西都是浮动的，外部的BOX想要高度自适应，就用这种方法，比较简单，比较好,比用一个DIV要好的多了*/
.information figure:after {
	content: '.';
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
.information figure {
	margin: .15rem 0 0 0;
	position: relative;
}
.information figure img {
	width: 50%;
	float: left;
}
/*图片和文字之间总得有点距离，所以，我们这里用了2%的距离，这个值得学习借鉴 */
.information figure figcaption {
	width: 48%;
	float: right;
}
/*这里，同样遇到了文字缩放的问题了，缩放的时候，字体本身不会变化，所以，字体会自动换行，挤到下面去了，一般我们的做法就是禁止换行，但是它的内容又不得不换行*/
/*这里就提供了一个方案，不用设置禁止换行，这个设置的目的就是为了控制它的行数*/
/*不得大于1行，或者两行，否则就会隐藏，比设置它的高度要智能得多了。。呵呵，是一个不错的解决方案*/
/*但是，它的内容会很空，你也可以在这里添加一些东西，在缩小的时候隐藏掉就OK了。。很多的解决方案是，如果真的调和不了，就直接设置在移动端隐藏，不让它显示，简单的问题简单化*/
.information .title {
	border: none;
	padding: 0 0 .05rem 0;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}
.information .small_title {
	font-weight: normal;
	padding: 0;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.information .price {
	color: #f60;
	position: absolute;
	bottom: 0;
}
.information .price strong {
	font-size: .26rem;
}
.ticket .type {
	margin: .2rem 0 .2rem 0;
	border: none;
}
.ticket .type mark {
	color: #fff;
	background-color: #458B00;
	padding: .05rem .08rem;
	border-radius: .04rem;
	margin: 0 .1rem 0 .16rem;
}
.ticket .form {
	border: none;
}
.ticket .form p {
	margin: .1rem 0;
}
.ticket .form label {
	display: block;
	margin: 0 0 .05rem 0;
}
.ticket .form input {
	width: 97%;
	height: .2rem;
	border: 1px solid #ccc;
	background-color: #fff;
	border-radius: .04rem;
	padding: .05rem;
	color: #666;
}
.ticket .submit {
	width: 30%;
	border-radius: .04rem;
	background-color: #f60;
	color: #fff;
	text-align: center;
	border: none;
	cursor: pointer;
	padding: .1rem;
	margin: 0 auto;
	display: block;
}
.ticket .new {
	margin: .2rem 0 0 0;
}
.ticket .new ul {
	margin: 20px 0 0 0;
}
.ticket .new li {
	display: inline-block;
	padding: 5px 10px;
}
.ticket .new li:first-child {
	padding-left: 0;
}
.ticket .new li:nth-child(2) {
	background-color: #458B00;
	border-radius: 4px;
	color: #fff;
}
.ticket table {
	width: 100%;
    border-collapse:collapse;
    margin: 20px 0 0 0;
    border: 1px solid #ddd;
}
.ticket table th {
	padding: .15rem 0;
	border-bottom: 1px solid #ddd;
	font-weight: normal;
}
.ticket table td {
	padding: .15rem 0;
	text-align: center;
	border-bottom: 1px solid #ddd;
}
.ticket table tr:nth-child(2n) {
	background-color: #fafafa;
}
.ticket table tr:hover {
	background-color: #eee;
}
.ticket .price {
	color: #f60;
}
.ticket .more2 {
	text-align: center;
	margin: 0 auto;
	cursor: pointer;
	display: block;
	color: #666;
}
.ticket .reserve {
	border-radius: .04rem;
	background-color: #f60;
	color: #fff;
	text-align: center;
	padding: .05rem .08rem;
}
/*字体按说是无法自适应的，这里必须应用媒体查询这种形式才能管用*/
/*媒体查询，大于480px小于640px*/
@media (min-width: 480px) and (max-width: 640px) {
	#tour h2,.information .price strong {
		font-size: .26rem;
	}
	#tour h3, #footer, #tour figcaption, #tour .info, .list {
		font-size: .16rem;
	}
	#headline h2 {
		font-size: .22rem;
	}
	#headline h3 {
		font-size: .14rem;
	}	
	.list h2 {
		font-size: .2rem;
	}
}

/*媒体查询，小于480px*/
@media (max-width: 480px) {
	#tour h2,.information .price strong {
		font-size: .20rem;
	}
	#tour h3, #tour figcaption, #tour .info, .list {
		font-size: .14rem;
	}
	#footer {
		font-size: .12rem;
	}
	#headline h2 {
		font-size: .18rem;
	}
	#headline h3 {
		font-size: .12rem;
	}
	.list h2 {
		font-size: .17rem;
	}
	.min {
		display: none;
	}
}